<template>
  <a-modal v-model="visible" title="插入公众号" :maskClosable="false" :width="900" centered>
    <div class="insert-gzh">
      <h3>插入教程：</h3>

      <span>
        您可以在您的公众号菜单栏或推文中插入您的链接。
      </span>

      <a
        href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzk0OTcyMTI5MQ==&action=getalbum&album_id=3567617834689740804#wechat_redirect"
        target="_blank"
        class="link"
      >
        参考插入公众号样例
      </a>

      <a href="https://mp.weixin.qq.com/s/dqmOxFpD9PoZy1NHtHLoqw" class="link" target="_blank">公众号运营技巧</a>


      <h5>一、绑定小程序（已绑定可跳过）：</h5>

      <span>
        登陆公众号平台，进入【广告与服务】-【小程序管理】。如未开通小程序，则需要点击开通。点击关联小程序。搜索本小程序名称或输入AppID，绑定小程序。
      </span>

      <h5>二、插入到公众号菜单：</h5>

      <span>
        登陆公众号平台，进入【内容与互动】-【自定义菜单】。添加菜单，【消息类型】选择【跳转小程序】，按提示选择当前小程序，输入本页提供的专属小程序路径，保存并发布即可。
      </span>

      <viewer :images="[stepImg1]">
        <img class="step-img" :src="stepImg1" />
      </viewer>

      <h5>三、插入到公众号文章：</h5>

      <span>
        登陆公众号平台，编辑公众号文章时，在图文编辑器顶部选择【小程序】，选择小程序（搜索本小程序名称或者输入AppID），然后输入本页提供的专属小程序路径，即可实现将小程序插入推文。
      </span>

      <viewer :images="[stepImg2]">
        <img class="step-img" :src="stepImg2" />
      </viewer>

      <h5>四、更多运营技巧或咨询客服请关注“商协邦服务”公众号</h5>
      <viewer :images="[shangxiebangQrcode]">
        <img class="shangxiebang_qrcode" :src="shangxiebangQrcode" width="200px" />
      </viewer>
    </div>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      link: undefined,
      stepImg1: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/official-step1.jpg',
      stepImg2: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/official-step2.jpg',
      shangxiebangQrcode: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/shangxiebang_qrcode.png'
    }
  },
  methods: {
    openModel(link) {
      this.link = link
      this.visible = true
    },
    closeModel() {
      this.visible = false
    },
    handleCopy() {
      this.$copyText(this.link)
        .then(message => {
          this.$message.success('复制成功')
        })
        .catch(err => {
          this.$message.error('复制失败')
        })
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.insert-gzh {
  .step-img {
    width: 80%;
  }
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>
